<template>
    <!-- 业务组件配置管理 -->
    <BaseMainSlot :show-tab="true">
        <template v-slot:btn-box>
            <ActionBar :add-active="addActive" :del-active="delActive" :cancel-active="cancelActive" :has-edit="false"
                :has-del="false" :has-save="false" :has-add="true" :save-active="saveActive" @add="add" @cancel="cancel"
                @del="del" />
        </template>
        <template v-slot:search-box>
            <SearchBox @search="search">
                <div class="common-search-item">
                    <div class="label">诊断项名称:</div>
                    <div class="input">
                        <el-input v-model="diagnosisItemName" placeholder="请输入诊断项名称" clearable @input="search()" />
                    </div>
                </div>
            </SearchBox>
        </template>
        <template v-slot:table-box>
            <!-- 业务组件展示表格 -->
            <div class="zh-table-view">
                <el-table :data="tableData" @row-click="handleEdit" height="100%">
                    <el-table-column type="index" label="序号" width="55" align="center" />
                    <el-table-column prop="diagnosisItemName" label="诊断项名称" />
                    <el-table-column label="品种" >
                        <template slot-scope="scope">
                          {{ diagnosisItemObj[ scope.row.diagnosisItemId] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="diagnosisItemSymbolNo" label="诊断项症状编号" />
                    <el-table-column prop="diagnosisItemSymbolDesc" label="特征描述" />
                    <el-table-column label="是否是主要判断特征">
                        <template slot-scope="scope">
                            <el-image v-if="scope.row.imgList && scope.row.imgList.length > 0" class="imageStyle"
                                :src="scope.row.imgList[0]" :preview-src-list="scope.row.imgList">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="edit">修改</el-button>
                            <el-button size="mini" type="warning"
                                @click="dellineallmes(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
                    @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
            </div>
        </template>

        <template v-slot:dialog>
            <!-- 新增业务组件的弹框 -->
            <el-dialog :title="titleText + '诊断项'" class="formData" :visible.sync="dialogFormVisible" width="40%"
                :before-close="() => { dialogFormVisible = false }">
                <el-form ref="formData" label-position="left" :model="formData" :rules="rules" class="el-form">
                    <el-form-item label="诊断项名称" prop="diagnosisItemId" class="w100p">
                        <el-select class="w100p" filterable clearable v-model="formData.diagnosisItemId">
                            <el-option v-for="item of diagnosisItemList" :key="item.diagnosisItemId"
                                :label="`${item.plantVarietyName}:${item.diagnosisItemName}`" :value="item.diagnosisItemId" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="诊断项症状编号" prop="diagnosisItemSymbolNo" class="w100p">
                        <el-input class="w100p" v-model="formData.diagnosisItemSymbolNo" clearable
                            placeholder="请输入诊断项症状编号" />
                    </el-form-item>
                    <el-form-item label="特征描述" prop="diagnosisItemSymbolDesc" class="w100p">
                        <el-input class="w100p" v-model="formData.diagnosisItemSymbolDesc" clearable type="textarea"
                            :rows="2" placeholder="请输入特征描述" maxlength="300" show-word-limit />
                    </el-form-item>
                    <el-form-item label="特征图片" prop="fileIdList" class="w100p">
                        <upload :limit="2" :urlList="formData.urlList" @getFile="getFile" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel('formData')">取 消</el-button>
                    <el-button type="primary" @click="savemes">保 存</el-button>
                </div>
            </el-dialog>
        </template>
    </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar/index";
import { mymixin } from "@/utils/mixins";
import SearchBox from "@/components/SearchBox";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import zhreq from '@/api/basic-info-manage/diagnostic-item-symptom'
import diagnosticItemManagement from '@/api/basic-info-manage/diagnosticItem-management'
import upload from "@/components/uploadimage/upload.vue";
import Pagination from "@/components/Pagination";
// import { getTitleList } from "@/components/getnameurl";
export default {
    components: { ActionBar, Pagination, BaseMainSlot, SearchBox, upload },
    mixins: [mymixin],
    data() {
        return {
            isshowuploadpic: false,
            tableData: [],
            pageSize: 10,
            currentPage: 1,
            totalSize: 0,
            diagnosisItemName: '',
            formData: {},
            diagnosisItemObj:{},
            diagnosisItemList: [],
            rules: {
                diagnosisItemId: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                diagnosisItemSymbolNo: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                diagnosisItemSymbolDesc: [
                    { required: true, message: '请选择', trigger: 'change' }
                ]
            },
        }
    },
    created() {
    },
    mounted() {
        this.initData()
    },
    methods: {
        // 获取下拉框信息
        async initData() {
            this.diagnosisItemObj = {};
            let { data: diagnosisItemList } = await diagnosticItemManagement.queryByCondition({});
            this.diagnosisItemList = diagnosisItemList||[]
            this.diagnosisItemList.forEach(e=>{
                this.diagnosisItemObj[e.diagnosisItemId] = e.plantVarietyName
            })
            this.gettabledataList()
        },
        handleChangeDiagnosisItem(id) {
            let rut = this.diagnosisItemList.find(e => { return e.diagnosisItemId == id })
            this.$set(this.formData, 'diagnosisItemName', rut.diagnosisItemName)
        },
        // 获取表格信息
        gettabledataList() {
            let params = {
                page: this.currentPage,
                size: this.pageSize,
                entity: {
                    diagnosisItemName: this.diagnosisItemName
                }
            }
            zhreq.queryPageByCondition(params).then(res => {
                let resData = res.data || {};
                if (res.code === 1) {
                    this.tableData = resData.content || []
                    this.tableData.forEach(item => {
                        item.imgList = item.fileIdList ? item.fileIdList.split(',') : []
                    })
                    this.totalSize = resData.totalElements
                    this.resetActionBar()
                } else {
                    this.$message.warning("获取表格失败")
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 搜索
        search() {
            this.currentPage = 1;
            this.gettabledataList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.gettabledataList();
        },
        changeCurrentPage(currentPage) {
            this.currentPage = currentPage;
            this.gettabledataList();
        },
        // 删除一个业务组件
        dellineallmes(i, e) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                zhreq.delList([e.diagnosisItemSymbolId]).then(
                    res => {
                        if (res.code === 1) {
                            this.$message.success("删除成功！")
                            this.gettabledataList()
                        } else {
                            this.$message.success("删除失败！")
                        }
                    }
                )
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 上传图片
        getFile(file) {
            this.formData.urlList = file;
            this.formData.fileIdList = file.map(e => { return e.url }).toString()
            console.log(this.formData)
        },
        handleEdit(row) {
            if (row) {
                this.formData = JSON.parse(JSON.stringify(row))
                this.formData.urlList = row.imgList.map(e => { return { url: e } })
            }
        },
        // 保存要添加的业务的组件信息
        savemes() {
            this.$refs['formData'].validate((valid) => {
                if (valid) {
                    this.handleChangeDiagnosisItem(this.formData.diagnosisItemId)
                    this.formData.fileIdList = this.formData.urlList ? this.formData.urlList.map(e => { return e.url }).toString() : ''
                    if (this.nowChanceStau === "edit") {
                        let param = {
                            ...this.formData
                        }
                        zhreq.edit(param).then(response => {
                            let mes = response
                            if (mes.code == 1) {
                                this.$message.success("修改成功！")
                                this.gettabledataList()
                                this.cancel('formData')
                            }else{
                                this.$message.warning(mes.msg||"操作失败！")
                            }
                        })
                    } else if (this.nowChanceStau === "add") {
                        let param = {
                            ...this.formData
                        }
                        zhreq.add(param).then(response => {
                            let mes = response
                            if (mes.code == 1) {
                                this.$message.success("添加成功！")
                                this.gettabledataList()
                                this.cancel('formData')
                            }else{
                                this.$message.warning(mes.msg||"操作失败！")
                            }
                        })
                    }
                } else {
                    return false;
                }
            })

        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.imageStyle {
    height: 100px;
    width: 100px;
    border-radius: 4px;
}
::v-deep .el-form-item__label{
    min-width: 140px !important;
}
</style>